<template style="width: 100;heigth: 100%">
  <!-- <div :class="[isFullScreen?'full-screen':'','zoom-box','aui-card--fill']"
       ref="fullScreen"> -->
  <!-- <div :style="adaptive"
       class="protection-wrapper">
    <apply class="apply"></apply>
    <pay class="apply1"></pay>
    <others class="apply2"></others>
    <announcement class="announcement"></announcement>
    <applyTable class="myApply"></applyTable>
    <applyPay class="myPay"></applyPay>
  </div> -->
  <div class="content"
       :style="{'height': vheight}">
    <div class="row1">
      <apply class="apply"></apply>
      <pay class="apply1"></pay>
      <others class="apply2"></others>
      <announcement class="announcement"></announcement>
    </div>
    <div class="row2">
      <applyTable class="myApply"></applyTable>
      <applyPay class="myPay"></applyPay>
    </div>
  </div>
</template>

<script>
// import fullScreen from '@/mixins/full-screen'
import apply from './aboutReport/apply.vue'
import pay from './aboutReport/pay.vue'
import others from './aboutReport/others.vue'
import applyTable from './aboutReport/applyTable.vue'
import applyPay from './aboutReport/applyPay.vue'
import announcement from './aboutReport/announcement.vue'
export default {
  // mixins: [fullScreen],
  name: 'dormitory',
  components: {
    apply,
    pay,
    others,
    applyTable,
    applyPay,
    announcement
  },
  props: {
    // 可视区域高度   受tabs和header影响可视区域高度会变化
    vheight: {
      type: String,
      default: '87vh'
    }
  },
  data () {
    return {
      adaptive: {
        transform: 'scale(1)',
        left: '0px',
        top: '0px'
      }
    }
  },
  mounted () {
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
// .protection-wrapper {
//   // position: relative;
//   color: #333;
//   // width: 1920px;
//   height: 1180px;
//   width: 100%;
//   // min-height: 120vh;
//   // transition: all 0.3s;
//   // overflow: scroll;
//   overflow: auto;
//   .apply {
//     width: 26%;
//     height: 385px;

//     top: 20px;
//     left: 1%;
//     border: 1px solid rgba(112, 112, 112, 0.4);
//     border-radius: 4px;
//     background: #fff;
//   }
//   .apply1 {
//     width: 26%;
//     height: 385px;

//     top: 20px;
//     left: 28%;
//     border: 1px solid rgba(112, 112, 112, 0.4);
//     border-radius: 4px;
//     background: #fff;
//   }
//   .apply2 {
//     width: 18%;
//     height: 385px;

//     top: 20px;
//     left: 55%;
//     border: 1px solid rgba(112, 112, 112, 0.4);
//     border-radius: 4px;
//     background: #fff;
//   }
//   .announcement {
//     width: 25%;
//     height: 385px;

//     top: 20px;
//     left: 74%;
//     border: 1px solid rgba(112, 112, 112, 0.4);
//     border-radius: 4px;
//     background: #fff;
//   }
//   .myApply {
//     width: 48%;
//     height: 655px;

//     top: 415px;
//     left: 1%;
//     border: 1px solid rgba(112, 112, 112, 0.4);
//     border-radius: 4px;
//     background: #fff;
//   }
//   .myPay {
//     width: 49%;
//     height: 655px;

//     top: 415px;
//     left: 50%;
//     border: 1px solid rgba(112, 112, 112, 0.4);
//     border-radius: 4px;
//     background: #fff;
//   }
// }
div::-webkit-scrollbar {
  display: none;
}
.content {
  width: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  // position: relative;
  .row1 {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    //
    .apply {
      width: 26%;
      height: 385px;
      border: 1px solid rgba(112, 112, 112, 0.4);
      border-radius: 4px;
      background: #fff;
    }
    .apply1 {
      width: 26%;
      height: 385px;
      // margin-left: calc(26% + 15px);
      border: 1px solid rgba(112, 112, 112, 0.4);
      border-radius: 4px;
      background: #fff;
    }
    .apply2 {
      width: 18%;
      height: 385px;
      // margin-left: calc(26% + 15px + 26% + 20px);
      border: 1px solid rgba(112, 112, 112, 0.4);
      border-radius: 4px;
      background: #fff;
    }
    .announcement {
      width: 27%;
      height: 385px;
      // margin-left: calc(26% + 15px + 26% + 20px + 18% + 20px);
      border: 1px solid rgba(112, 112, 112, 0.4);
      border-radius: 4px;
      background: #fff;
    }
  }
  .row2 {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 15px;
    .myApply {
      width: calc(50% - 7.5px);
      height: 655px;
      // margin-top: calc(385px + 15px);
      border: 1px solid rgba(112, 112, 112, 0.4);
      border-radius: 4px;
      background: #fff;
    }
    .myPay {
      width: calc(50% - 7.5px);
      height: 655px;
      border: 1px solid rgba(112, 112, 112, 0.4);
      border-radius: 4px;
      background: #fff;
    }
  }
}
</style>
